<!-- 获取完整姓名页面 -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Album example · Bootstrap v5.1</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">

    <!-- Bootstrap core CSS -->
    <link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
    <link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
    <link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
    <meta name="theme-color" content="#7952b3">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
  </head>
  <body>

    <header onClick="toHome()">
      <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container">
          <a href="#" class="navbar-brand d-flex align-items-center">
            <strong>返回</strong>
          </a>
        </div>
      </div>
    </header>
    <!-- 页面主体 -->
    <main>
      <section class="py-5 container">
        <div class="row py-lg-5">
          <div class="col-lg-6 col-md-8 mx-auto">
              <form method="post" action="/result">
                  <div class="mb-4">
                    <label for="firstname" class="form-label">Firstname</label>
                    <input type="text" class="form-control" name="firstname" required="" value="{{firstname}}">
                    <div class="invalid-feedback">
                      Valid first name is required.
                    </div>
                  </div>
                  <div class="mb-4">
                      <label for="lastname" class="form-label">Lastname</label>
                      <input type="text" class="form-control" name="lastname" required="" value="{{lastname}}">
                      <div class="invalid-feedback">
                        Valid last name is required.
                      </div>
                  </div>
                  <button class="w-45 btn btn-secondary btn-lg" type="submit">Continue to checkout</button>
                  {% if fullname %}
                    <div class="mb-4" style="margin-top: 40px">
                      您输入的姓名是：
                      <span style="color:blue;">{{fullname}}</span>
                  </div>
                  {% endif %}
              </form>
          </div>
        </div>
      </section>
    </main>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
      function toHome(){
        window.location.href = '/'
      }
    </script>
  </body>
</html>
